<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="container">
      <h2>护眼主题切换</h2>
      <!-- 预设主题选择 -->
      <div class="theme-presets">
        <button class="theme-btn" data-theme="default">默认主题</button>
        <button class="theme-btn" data-theme="green">护眼绿</button>
        <button class="theme-btn" data-theme="brown">暖色棕</button>
        <button class="theme-btn" data-theme="blue">护眼蓝</button>
        <button class="theme-btn" data-theme="gray">护眼灰</button>
      </div>
      <!-- 自定义颜色设置 -->
      <div class="custom-colors">
        <h3>自定义颜色</h3>
        <div class="color-picker">
          <label>背景色：</label>
          <input type="color" id="bgColor" value="#FFFFFF" />
        </div>
        <div class="color-picker">
          <label>文字色：</label>
          <input type="color" id="textColor" value="#000000" />
        </div>
        <button id="applyCustom">应用自定义颜色</button>
      </div>
    </div>
    <script src="popup.js"></script>
  </body>
</html>
